| Android自定义View | 您所在的位置：网站首页 › android 自定义view c › Android自定义View |
Android自定义View
|
一、前言
由于最近项目中需要使用到自定义星星评分和打分控件，而且需要支持根据后台返回的数据动态配置满星星和空星星的颜色，虽然Android中也提供了官方的星星评分控件RatingStar，但其效果不能满足UI和产品需求，而且项目中现用的自定义星星评分控件，是基于本地设置满星星和空星星的Drawable图片资源来实现满星星和空星星的显示效果，不能满足动态根据配置的颜色数据来改变满星星和空星星的颜色效果，基于这种需求场景，才有了今天文章所说的RatingStarView。 本控件主要参考和优化改造于GitHub项目https://github.com/everhad/AndroidRatingStar，原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html，非常感谢原作者的启发。 二、RatingStarView及效果展示RatingStarView是一款类似于Android官方RatingStar控件的评分和打分控件，支持使用颜色值动态设置控制星星的前景和背景颜色（满星星和空星星），同时支持打分、边界等更多的自定义属性设置，主要支持特性如下： 1）支持任意小数比例颗星 2）填充色（前景色，即满星星颜色）、底色（背景色，即空星星颜色）、描边色 3）指定高度，宽度自适应 4）拐角弧度、描边宽度、星星间距 5）肥胖指数（star thickness），越胖越可爱 6）支持点击评分设置，目前点击评分不支持半颗星 效果如下：
实现原理和思路可以参考原作者博文链接https://www.cnblogs.com/everhad/p/6828627.html，作者已讲述得很细和很棒，本文不再重述，本文所述控件主要是基于原作者的AndroidRatingStarView，主要优化原作者星星评分控件在填充颜色是半透明时或较浅颜色时，空星星内部中间出现灰色的明显线条的问题，如下图第一行最后面两颗空星星所示： 本人也是在实际项目使用中发现和修复了这个问题，同时也在原作者GitHub上提交了这个Issue，链接https://github.com/everhad/AndroidRatingStar/issues/4 在原作者中，是通过五次Path路径完成五个星星尖角的绘制，然后再绘制星星中间空洞而实现整颗星星的绘制，而且中间可能存在偏移值，如上文所述，在填充颜色是半透明时或较浅颜色时，空星星内部中间出现灰色的明显线条的问题，针对这个问题，本人主要是优化了原作者绘制星星的代码的实现思路，本人通过路径Path，一次完成星星的填充Path绘制，从而解决了这个问题，有兴趣的朋友可以阅读代码了解： private void drawSolidStar(StarModel star, Canvas canvas, int fillColor) { paint.setStyle(Paint.Style.FILL_AND_STROKE); paint.setColor(fillColor); paint.setPathEffect(pathEffect); VertexF prev = star.getVertex(1); Path path = new Path(); path.moveTo(prev.x, prev.y); for (int i = 0; i < 5; i++) { VertexF next = prev.next; path.lineTo(next.x, next.y); path.lineTo(next.next.x, next.next.y); path.lineTo(next.next.x, next.next.y); prev = next.next; } canvas.drawPath(path, paint); }四、相关链接和参考 所有代码已提交到本人GitHub项目，有兴趣的朋友可以参考本人GitHub项目代码，希望能给大家带有更多的参考价值，大家互相学习和讨论，链接请见https://github.com/oukanggui/WidgetLibrary/tree/master/widget/src/main/java/com/baymax/widget/ratingstar 同时也感谢原作者项目和博文的参考和启发： 原作者Github项目地址https://github.com/everhad/AndroidRatingStar 原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html |
【本文地址】